<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/all.css" />
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/jquery.touchSlider.js"></script>
    <script src="js/self.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
//            图片滑动
            $dragBln = false;
            $(".main_image").touchSlider({
                flexible : true,
                speed : 200,
                btn_prev : $("#btn_prev"),
                btn_next : $("#btn_next"),
                paging : $(".flicking_con a"),
                counter : function (e){
                    $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
                }
            });

            $(".main_image").bind("mousedown", function() {
                $dragBln = false;
            });

            $(".main_image").bind("dragstart", function() {
                $dragBln = true;
            });

            $(".main_image a").click(function(){
                if($dragBln) {
                    return false;
                }
            });
            $(".main_visual").hover(function(){
//                clearInterval(timer);
            },function(){
                timer = setInterval(function(){
                    $("#btn_next").click();
                },5000);
            });

            $(".main_image").bind("touchstart",function(){
                clearInterval(timer);
            }).bind("touchend", function(){
                timer = setInterval(function(){
                    $("#btn_next").click();
                }, 5000);
            });

            //            进度条
            $(".bar_span").each(function () {
                var ress = $(this).attr('width');
                var len=ress+"%";
                console.log(len);
                $(this).animate({
                    width:len
                });

            })



        });
    </script>
</head>
<body  ontouchstart="">
    <div class="container jz">
        <div class="main_visual">
            <div class="flicking_con">
            [广告图圆点]
            </div>
            <div class="main_image">
                <ul>
                [广告图图片]
                </ul>
            </div>
        </div>
        <!--main_visual-->
        <nav  class="w100">
          [首页快捷菜单]
        </nav>
        [首页推荐列表]
    </div>

    <footer class="footerTab w100 of pf">
        <a onclick="window.location.href='index.html'" href="javascript:void(0);" class="footerTab_current">
            <img src="images/zhongchou2.png" class="db jz">
            <span class="db tc">众筹</span>
        </a>
        <a onclick="window.location.href='baitiao.html'" href="javascript:void(0);">
            <img src="images/f2.png" class="db jz" style="width: 25px;">
            <span class="db tc">白条</span>
        </a>
        <a onclick="window.location.href='moneyManagement.html'" href="javascript:void(0);">
            <img src="images/f3.png" class="db jz" style="width: 27px;">
            <span class="db tc">理财</span>
        </a>
        <a onclick="window.location.href='rankingList.html'"  href="javascript:void(0);">
            <img src="images/f4.png" class="db jz" style="width: 27px;">
            <span class="db tc">排行</span>
        </a>
        <a onclick="window.location.href='personalAll.html'" href="javascript:void(0);">
            <img src="images/f5.png" class="db jz" style="width: 25px;">
            <span class="db tc">我的</span>
        </a>
    </footer>

</body>
</html>